<template>
  <div>
    <div class="last-item-wrapper" @click="handleEvent">
      <div class="last-title2">总派单人数</div>
      <div class="last-item-bottom-wrapper">
        <div class="left-dot dot-color1" />
        <div class="people">1375人</div>
      </div>
    </div>
    <div class="last-item-wrapper" @click="handleEvent">
      <div class="last-title2">总派单人数</div>
      <div class="last-item-bottom-wrapper">
        <div class="left-dot dot-color1" />
        <div class="people">1375人</div>
      </div>
    </div>
    <div class="last-item-wrapper" @click="handleEvent">
      <div class="last-title2">总派单人数</div>
      <div class="last-item-bottom-wrapper">
        <div class="left-dot dot-color1" />
        <div class="people">1375人</div>
      </div>
    </div>
    <div class="last-item-wrapper" @click="handleEvent">
      <div class="last-title2">总派单人数</div>
      <div class="last-item-bottom-wrapper">
        <div class="left-dot dot-color1" />
        <div class="people">1375人</div>
      </div>
    </div>
    <div class="last-item-wrapper" @click="handleEvent">
      <div class="last-title2">总派单人数</div>
      <div class="last-item-bottom-wrapper">
        <div class="left-dot dot-color1" />
        <div class="people">1375人</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "TotalName",
  props: {
    options: {
      type: Object,
      default: () => {}
    }
  },
  methods: {
    handleEvent(e) {
      this.$emit("change", e);
    }
  }
};
</script>

<style lang="scss" scoped>
.last-item-wrapper {
  background-color: #fafafa;
  padding: 10px 0px 10px 50px;
  border-radius: 4px;
  border: 1px solid rgba(232, 232, 232, 1);
  .last-title2 {
    color: #222426;
  }
  .last-item-bottom-wrapper {
    position: relative;
    right: 16px;
    margin-top: 5px;
    .left-dot {
      width: 8px;
      height: 8px;
      border-radius: 100px;
      display: inline-block;
      margin-right: 5px;
    }

    .dot-color1 {
      background-color: var(--primary);
    }

    .dot-color2 {
      background-color: #48cb9e;
    }

    .dot-color3 {
      background-color: #fd7d4c;
    }

    .dot-color4 {
      background-color: #fdbe12;
    }

    .dot-color5 {
      background-color: var(--primary77);
    }
    .people {
      display: inline-block;
      color: #222426;
    }
  }
}
</style>
